<template>
  <div class="record-container">
    <!-- 记录统计 -->
    <StatisCard
      :info="leaveData"
      :titleInfo="{
        title: '本学期晚归统计',
        numText: '晚归总人次',
        avageText: '人均晚归时长',
        unit: '分钟'
      }"
      waterMarking="late"
    />
    <StatisCard
      :info="outData"
      :titleInfo="{
        title: '本学期出入异常统计',
        numText: '出入异常总人次',
        avageText: '人均晚归时长(最后入闸)',
        unit: '分钟'
      }"
      waterMarking="access"
    />
    <StatisCard
      :info="temData"
      :titleInfo="{
        title: '本学期体温异常统计',
        numText: '体温异常总人次',
        avageText: '体温异常平均值',
        unit: '℃'
      }"
      waterMarking="temper"
    />
    <!-- 筛选按钮 -->
    <div class="bottom-screen-container">
      <div class="screen-btn" @click="$router.push('./recordSearchForm')">
        从所有出入记录中筛选
      </div>
    </div>
  </div>
</template>
<script>
import StatisCard from './child/StatisCard'
export default {
  data() {
    return {
      leaveData: {},
      outData: {},
      temData: {},
    }
  },
  components: {
    StatisCard,
  },
  created() {
    this.getStaffCount()
  },
  methods: {
    getStaffCount() {
      this.$api.record.getStaffCount({}).then(res=> {
        const { leaveData, outData, temData } = res.data
        this.leaveData = leaveData
        this.outData = outData
        this.temData = temData
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.record-container {
  height: 100%;
  padding-bottom: 60px;
  .bottom-screen-container {
    display: flex;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    width: 375px;
    height: 60px;
    background: #ffffff;
    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.09);
    .screen-btn {
      display: grid;
      place-items: center;
      margin: auto 25px;
      width: 325px;
      height: 40px;
      color: #ffffff;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 600;
      background: #2a529f;
      font-family: PingFangSC-Semibold, PingFang SC;
    }
  }
}
</style>